<template>
  <view class="profile-card" v-if="obj && Object.keys(obj).length">
    <view class="profile-header">
      <view class="profile-avatar">
        <image :src="obj.avatar" class="profile-image" />
        <view class="profile-badge">专属红娘</view>
      </view>
    </view>
    <view class="profile-info">
      <view class="profile-name">婚恋顾问@{{ obj.nickname }}，工号：{{ obj.job_number }}</view>
      <view class="profile-store">来自：{{ obj.come_from }}</view>
      <view class="MyWxImage">
        <image :src="obj.wxUrl" class="profile-qrcode" />
      </view>
      <view class="profile-scan-text">长按二维码加红娘微信</view>
      <view class="profile-phone">
        <image src="@/static/My/my_phone_hn.png" mode="scaleToFill" />
        {{ obj.phone }}
      </view>
    </view>
  </view>
  <view class="makerCard" v-else>
    <view class="cardTitle"> 您暂时还没有专属红娘 </view>
    <view class="cardBox">
      <image src="/static/My/my_qrcode.png" alt="" />
    </view>
    <view class="cardText">长按二维码加客服微信咨询</view>
    <view class="cardPhone">
      <image src="/static/My/my_phone.png" alt="" /> 18618516819
    </view>
    <button class="btn" @click="jump">
      <image src="@/static/My/my_service.png" alt="" />红娘服务大厅
    </button>
  </view>
</template>

<script setup lang="ts">
import type { PropsList } from '@/types/PropsList'
//接收参数
const { obj } = defineProps<{ obj: PropsList }>()
// 跳转到红娘页面
const jump = () => {
  uni.switchTab({
    url: '/pages/matchmaker/matchmaker',
  })
}
</script>

<style scoped lang="scss">
.profile-card {
  width: 90vw;
  height: 620rpx;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  text-align: center;
  background-color: #f8f8f8;
  margin: 20rpx auto;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 15vh;

  .profile-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;
    top: -20%;

    .profile-avatar {
      border-radius: 50%;
      border: 8rpx solid #00c1de;
      overflow: hidden;
      position: relative;

      .profile-image {
        width: 230rpx;
        height: 230rpx;
        object-fit: cover;
        background-color: #fff;
      }

      .profile-badge {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
        border-radius: 50%;
        padding: 5rpx;
        color: #fff;
        font-size: 25rpx;
        box-sizing: border-box;
        background-color: rgba($color: #00c1de, $alpha: 1);
      }
    }
  }

  .profile-info {
    margin-top: -18%;

    .profile-name {
      font-size: 28rpx;
      color: rgba(0, 157, 255, 0.742);
    }

    .profile-store {
      font-size: 28rpx;
      margin: 10rpx 0;
      color: #666;
    }

    .MyWxImage {
      width: 230rpx;
      height: 230rpx;
      padding: 15rpx 0rpx;
      margin: 0 auto;
      box-sizing: border-box;
      border-radius: 10rpx;
      background-color: white;

      .profile-qrcode {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .profile-scan-text {
      font-size: 28rpx;
      color: #666;
      margin: 10rpx 0;
    }

    .profile-phone {
      font-size: 28rpx;
      color: #007bff;
      margin-top: 10rpx;

      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}

.makerCard {
  width: 85%;
  padding: 5%;
  font-size: 28rpx;
  border-radius: 5%;
  margin: 10% auto;
  box-sizing: border-box;
  background-color: #f8f8f8;

  .cardTitle {
    width: 100%;
    text-align: center;
  }

  .cardBox {
    width: 260rpx;
    height: 240rpx;
    margin: 5% auto;
    border-radius: 10%;
    background-color: #fff;
  }

  .cardText {
    width: 100%;
    color: gray;
    font-size: 24rpx;
    text-align: center;
  }

  .cardPhone {
    width: 100%;
    text-align: center;
    padding: 2%;

    image {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .btn {
    width: 55%;
    color: white;
    margin: 2% auto;
    font-size: 30rpx;
    border-radius: 50rpx;
    background: linear-gradient(to right, #4aade0, #62b5e4, #89c7e6);

    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 3%;
    }
  }
}
</style>
